<template>
  <div class="goods">
    <Breadcrumb name1="商品管理" name2="商品列表"></Breadcrumb>
    <el-card class="main">
      <div class="goods-card">
        <el-row :span="8" class="goods-left" style="margin-right: 20px">
          <el-card
            @click.native="onestore(item.gid)"
            shadow="always"
            v-for="item in val"
            :key="item.gid"
          >
            {{ item.gname }}列表
          </el-card>
        </el-row>
        <el-row
          :span="8"
          class="goods-center"
          style="margin-right: 20px; overflow: auto"
          v-infinite-scroll="load"
        >
          <el-card
            shadow="always"
            v-for="item in shop"
            :key="item.id"
            class="infinite-list-item"
            @click.native="shopLb(item.bid)"
          >
            {{ item.gname }}列表
          </el-card>
        </el-row>
        <el-row :span="8" class="goods-right">
          <el-col :span="8" v-infinite-scroll="load" style="overflow: auto">
            <el-card shadow="hover" v-for="item in shopList" :key="item.id">
              <div class="shop-list-left">
                <div class="list-left">
                  <div class="left">
                    <div class="imgs">
                      <img :src="item.img.split('$')[0]" alt="" />
                    </div>
                    <div class="right">
                      <p>{{ item.brand }}</p>
                      <p>
                        {{ item.desc }}
                      </p>
                    </div>
                  </div>
                </div>
                <div class="list-right">
                  <el-button type="danger" plain @click="open(item.id)"
                    >点击删除</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
import Breadcrumb from '@/components/breadcrumb'
import { getCategory, getgoodsbybid, deleteGoods } from '@/api'
export default {
  data() {
    return {
      val: '',
      shopList: '',
      shop: '',
      count: 0,
      bid: '',
      gid: '',
    }
  },
  components: {
    Breadcrumb,
  },
  async created() {
    this.init()
  },
  methods: {
    async init() {
      const res = await getCategory()
      this.val = res.data.data
      this.shop = this.val[0].children
      const reg = await getgoodsbybid({ bid: 1 })
      this.shopList = reg.data.data
    },
    load() {
      this.count += 2
    },
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancText: '取消',
        type: 'warnelButtoning',
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          await deleteGoods({ id: id })
          this.init()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    onestore(id) {
      //列表id
      this.gid = id
      this.shop = this.val[this.gid - 1].children
    },
    async shopLb(id) {
      this.bid = id
      const reg = await getgoodsbybid({ bid: this.bid })
      this.shopList = reg.data.data
    },
  },
}
</script>
<style lang="scss" scoped>
.goods {
  .main,
  .goods-card {
    cursor: auto !important;
  }

  ::v-deep .el-card__body {
    cursor: pointer;
  }
  .goods-card {
    display: flex;
    box-sizing: border-box;
    .goods-left {
      height: 550px;
      width: 200px;
      border: 1px solid #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      padding: 10px;
      .el-card {
        margin-bottom: 20px;
      }
    }
    .goods-center {
      height: 550px;
      width: 200px;
      border: 1px solid #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      padding: 10px;
      .el-card {
        margin-bottom: 5px;
      }
    }
    .goods-right {
      height: 550px;
      width: 850px;
      border: 1px solid #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      padding: 10px;
      display: flex;
      .el-col {
        width: 100%;
      }
      .el-card {
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        .el-card__body {
          width: 100%;
          display: flex;
        }
        .shop-list-left {
          width: 790px;
          height: 50px;

          display: flex;

          .list-left {
            width: 80%;
            height: 100%;
            // border: 1px solid;
            // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            .left {
              display: flex;

              .imgs {
                height: 48px;
                width: 50px;
                img {
                  width: 100%;
                  height: 100%;
                  margin-right: 20px;
                }
              }
            }
            .right {
              width: 100%;
              width: 60%;
              margin-left: 20px;

              p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 20px;
              }
            }
          }
          .list-right {
            width: 20%;
            height: 100%;
            // border: 1px solid;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
